<script setup>
import { computed } from "vue";
import VideoItem from "./VideoItem.vue";

const props = defineProps({
  videos: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
  // 添加分类列表的 prop 定义
  categories: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(["delete", "status-change", "resubmit", "update"]);

// 处理删除视频
const handleDelete = (videoId) => {
  emit("delete", videoId);
};

// 处理状态变更
const handleStatusChange = (videoId, status) => {
  emit("status-change", videoId, status);
};

// 处理重新提交
const handleResubmit = (videoId) => {
  emit("resubmit", videoId);
};

// 添加处理更新的方法
const handleUpdate = (videoId, updateData) => {
  emit("update", videoId, updateData);
};

// 是否显示空状态
const showEmpty = computed(() => {
  return !props.loading && props.videos.length === 0;
});
</script>

<template>
  <div class="video-list">
    <!-- 加载中状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="5" animated />
    </div>

    <!-- 视频列表 -->
    <template v-else-if="videos.length > 0">
      <VideoItem
        v-for="video in videos"
        :key="video.id"
        :video="video"
        :categories="categories"
        @delete="handleDelete"
        @status-change="handleStatusChange"
        @update="handleUpdate"
        @resubmit="handleResubmit"
      />
    </template>

    <!-- 空状态 -->
    <el-empty v-else description="暂无视频" :image-size="200" />
  </div>
</template>

<style scoped lang="scss">
.video-list {
  margin-top: 16px;
}

.loading-container {
  padding: 20px 0;
}
</style>
